<template>
    <view class="gw-book-detail">
        <view class="book-img">
            <image mode="aspectFit"
                   :src="bookDetail.booksHead"/>
        </view>
        <view class="book-detail-info">
            <view class="book-title">{{bookDetail.booksName || '暂无'}}</view>
            <view class="book-label common-applicable-age">
                <text class="book-class-txt">{{bookDetail.sortNameLevel2 ? bookDetail.sortNameLevel2 : bookDetail.sortNameLevel1}}</text>
                <text class="book-age-txt">{{bookDetail.booksMinAge}}-{{bookDetail.booksMaxAge}}岁</text>
                <text class="book-age-label"
                      v-if="bookDetail.labelNames.length"
                      v-for="(item, index) in bookDetail.labelNames"
                      :key="index"
                >{{item}}</text>
            </view>
            <view class="book-author">作者:{{bookDetail.authorName || '暂无'}}</view>
            <view class="book-public">出版社:{{bookDetail.pressName || '暂无'}}</view>
        </view>
        <view class="common-division"/>
        <view class="book-author-info">
            <view class="common-title">
                <text class="common-title-line"/>
                内容简介
            </view>
            <view class="author-avator">
                <view class="detail content-detail">{{bookDetail.booksIntroduction || '暂无简介'}}</view>
            </view>
        </view>
        <view class="common-division"/>
        <view class="book-author-info">
            <view class="common-title">
                <text class="common-title-line"/>
                作者简介
            </view>
            <view class="author-avator">
                <view class="author-img">
                    <image :src="bookDetail.authorHead"/>
                </view>
                <view class="author-info">
                    <view class="title">{{bookDetail.authorName || '暂无作者'}}</view>
                    <view class="detail ellipsis">{{bookDetail.authorIntroduction}}</view>
                </view>
            </view>
        </view>
        <view class="common-division"/>
        <view class="book-detail-wrapper common-interval">
            <view class="common-title">
                <text class="common-title-line"/>
                书籍详情
            </view>
            <parser :html="bookDetail.booksDetails"/>
        </view>
        <view class="fix detail-bottom">
           <view class="btn-wrapper">
               <button :plain="true"
                       class="bottom-item contact-btn"
                       style="margin-right: 65rpx; color:#2BA8FC;"
                       open-type="contact"
                       @contact="contactInfo">
                   <image mode="aspectFit"
                          class="img-size"
                          src="https://img.thumbrary.com/contact1.png"/>
                   <text>客服</text>
               </button>
               <view class="bottom-item" @tap.stop="collectHandle">
                   <image mode="aspectFit"
                          class="img-size"
                          :src="http+(bookDetail.keep ? 'wish1' : 'wish2')+'.png'"/>
                   <text :style="{color: bookDetail.keep ? '#2BA8FC' : ''}">收藏</text>
               </view>
               <view class="bottom-item shopping-car" @tap="addBookHome">
                   <image mode="aspectFit"
                          class="img-size"
                          src="https://img.thumbrary.com/bookstore2.png"/>
                   <text class="shop-num" v-if="userInfo.BookstoreNum">{{userInfo.BookstoreNum}}</text>
                   <text>书屋</text>
               </view>
           </view>
            <view class="common-bottom-btn" @tap.stop="shoppingCar">{{bookDetail.shopping ? '已加入书筐' : '加入书筐'}}</view>
        </view>
        <gw-user-login ref="userLogin" :modalType="modalType"/>
    </view>
</template>

<script>
    import parser from "@/components/jyf-parser/jyf-parser";
    import { addShopOrCollect } from '@/util/commonFn'
    import gwUserLogin from '@/pages/components/gw-user-login'
    import { mapGetters } from 'vuex'
    import service from "@/service";
    export default {
        name: "gw-book-detail",
        components: {
            parser, gwUserLogin
        },
        computed: {
            ...mapGetters(['login', 'shoppingNum', 'userInfo'])
        },
        props: {
            item: {
                defalut: () => {
                },
                type: Object
            }
        },
        data(){
            return{
                http: this.$https,
                booksId: '',
                booksName: '',
                booksHead: '',
                booksMinAge: '',
                booksMaxAge: '',
                booksIntroduction: '',
                booksDetails: '',
                authorName: '',
                sortNameLevel2: '',
                labelNames: [],
                keep: false,
                shopping: false,
                modalType: 'login',
                booksIsGoods: 0,
                bookDetail: {}
            }
        },
        onLoad(params){
            let { booksId } = params;
            this.booksId = booksId;
            this.booksHandle();
        },
        mounted() {
        },
        methods: {
            collectHandle() {
                let that = this;
                addShopOrCollect(this.bookDetail.keep ? 'delCollect' : 'addCollect', 'collect', this.bookDetail.booksId).then(()=>{
                    uni.showToast({
                        title: `${this.bookDetail.keep ? '取消' : ''}收藏成功`,
                        duration: 2500,
                        icon: 'none'
                    });
                    that.booksHandle();
                })
            },
            contactInfo() {
                // Login();
            },
            // 添加到书屋
            addBookHome(){
                service.mineService.BookstoreAddSearchBookstore({
                    data: {
                        booksId: this.booksId
                    },
                    success: res => {
                        uni.hideLoading();
                        if (res.code === 200) {
                            this.$LinkTo('bookstore')
                        } else {
                            uni.showToast({
                                title: `${res.resultMsg}`,
                                duration: 2500,
                                icon: 'none'
                            });
                        }

                    },
                    fail: ()=>{
                        uni.hideLoading();
                        this.$LinkTo('bookstore')
                    },
                    complete(){
                        console.log(999, 'ooo')
                    }
                })
            },
            shoppingCar() {
                if(!this.login){
                    this.$refs.userLogin.showModal = true;
                    return;
                }
                if(!!this.userInfo.status){
                    this.modalType = 'bindPhone';
                    this.$refs.userLogin.showModal = true;
                    return;
                }
                if(this.bookDetail.shopping){
                    uni.showToast({
                        title: `已在书筐哦！`,
                        duration: 2500,
                        icon: 'none'
                    });
                    return;
                }
                let that = this;
                addShopOrCollect('addShopping', 'shopping', this.booksId).then(()=>{
                    uni.showToast({
                        title: `加入书筐成功`,
                        duration: 2500,
                        icon: 'none'
                    });
                    that.booksHandle();
                })
            },
            booksHandle(){
                service.homeService.getBookDetail({
                    data: {
                        booksId: this.booksId
                    },
                    success: res => {
                        uni.hideLoading();
                        if (res.code === 200) {
                            this.bookDetail = res.result || {}
                        } else {
                            uni.showToast({
                                title: `${res.resultMsg}`,
                                duration: 2500,
                                icon: 'none'
                            });
                        }
                    },
                    fail: ()=>{
                        uni.hideLoading();
                    },
                    complete: () => {
                    },
                });
            },
            goToShopping(){
                uni.switchTab({
                    url: '/pages/shopping/index'
                });
            },
            goToCollectiong(){
            },
        }
    }
</script>

<style scoped lang="scss">
    .gw-book-detail {
        padding-bottom: 120rpx;
        box-sizing: border-box;
        .book-img{
            width:750rpx;
            height:563rpx;
            background: #fff;
            image{
                width: 100%;
                height: 100%;
            }
        }
        .book-detail-info{
            padding: 20rpx 30rpx;
            box-sizing: border-box;
            background: #fff;
            .book-title{
                font-size:34rpx;
                font-weight:bold;
                line-height:48rpx;
                color:rgba(51,51,51,1);
            }
            .book-label{
                .book-age-label{
                    border-radius:10rpx 0rpx 10rpx 0rpx;
                    padding: 4rpx 10rpx;
                }
            }
            .book-author,.book-public{
                font-size:28rpx;
                font-weight:400;
                line-height:40rpx;
                color:rgba(153,153,153,1);
            }
            .book-public{}
        }
        .book-detail-wrapper{
            padding-bottom: 20rpx;
        }
        .book-author-info{
            padding: 20rpx 30rpx;
            .content-detail{
                color:rgba(153,153,153,1);
            }
            .author-avator{
                display: flex;
                .author-img{
                    /*width: 195rpx;*/
                    height:195rpx;
                    border-radius: 20rpx;
                    background:rgba(230,230,230,1);
                    margin-right: 20rpx;
                    flex: 0 0 195rpx;
                }
                image{
                    height:100%;
                    border-radius:4rpx;
                    width: 100%;
                }
                .author-info{
                    flex-grow: 1;
                    .title{
                        font-size:34rpx;
                        font-weight:bold;
                        color:rgba(51,51,51,1);
                    }
                    .detail{
                        font-size:24rpx;
                        font-weight:400;
                        line-height:33rpx;
                        color:rgba(153,153,153,1);
                        margin-top: 10rpx;
                        -webkit-line-clamp: 4;
                    }
                }
            }
        }
        .detail-bottom{
            background:rgba(255,255,255,1);
            box-shadow:0px -3px 20px rgba(0,0,0,0.08);
            padding: 0 30rpx;
            width: 100%;
            height: 110rpx;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-between;
            bottom: 0;
            .btn-wrapper{
                display: flex;
                align-items: center;
            }
            .bottom-item{
                display: flex;
                flex-direction: column;
                align-items: center;
                font-size: 24rpx;
                color: #999999;
                .icon-btn{
                    font-size: 44rpx;
                }
                .img-size{
                    width: 50rpx;
                    height: 66rpx;
                }
                margin-right: 52rpx;
                text{
                    line-height: 40rpx;
                }
                &.shopping-car{
                    position: relative;
                    .shop-num{
                        position: absolute;
                        top: -8rpx;
                        right: -14rpx;
                        background: #F82432;
                        width: 36rpx;
                        height: 36rpx;
                        line-height: 36rpx;
                        text-align: center;
                        font-size: 22rpx;
                        color: #fff;
                        border-radius: 50%;
                    }
                }
            }
            .contact-btn{
                border: none;
                padding: 0;
            }
        }
    }
</style>
